<template>
	<view class="contain">
		<view class="ui-all">
			<view class="avatar" @tap="avatarChoose">
				<view  class="imgAvatar">
					<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view>
				</view>
				<text v-if="avater">更改头像</text>
				<text v-if="!avater">授权微信</text>
				<button v-if="!avater" open-type="getUserInfo" class="getInfo"></button>
			</view>
			<view class="ui-list">
				<text>昵称</text>
				<input type="text" :placeholder="plcaevalue" :value="nickName" @input="bindnickName" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<input type="tel" :placeholder="telplcaevaluevalue" :value="mobile" @input="bindmobile" placeholder-class="place" />
				<!-- <button v-if="!mobile" open-type="getPhoneNumber" class="getInfo bun">授权手机号</button> -->
			</view>
			<view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="sexIndex" :range="sexRange">
					<view class="picker">
						{{sexRange[sexIndex].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>常住地</text>
				<picker @change="bindRegionChange" :value="adrRegion" mode='region'>
					<view class="picker">
						{{adrRegion[0]}} {{adrRegion[1]}} {{adrRegion[2]}}
					</view>
				</picker>
			</view>
			<view class="ui-list right" @click="showPicker">
				<text>生日</text>
				<input type="text" :value="birthValue" disabled placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>签名</text>
				<textarea :placeholder="signValue" placeholder-class="place" :value="description" @input="binddescription"></textarea>
			</view>
			<button class="save" @click="saveData">保 存 修 改</button>
		</view>
		
		<!-- 日期选择器 //0100101112752000 -->
		<u-datetime-picker 
		ref="datetimePickerRef"
		:show="showpicker" 
		v-model="birthdate"
		:minDate="1500000000" 
		:closeOnClickOverlay="true"
		:formatter="formatter"
	    @close="pkclose"
		@cancel="pkclose"
		@confirm="pkconfirm"
		mode="date">
		</u-datetime-picker>
		
	</view>
</template>

<script setup lang='ts'>
	import { ref,reactive } from 'vue'
	import { onLoad,onShow,onReady } from '@dcloudio/uni-app'
	import {timestampToDate,ChineseDate} from '@/utils/utils'
	let avater=ref("/static/user/avatar.png");
	let plcaevalue=ref("请输入昵称");
	let nickName=ref("");
	let mobile=ref("");
	let telplcaevaluevalue=ref("请输入手机号码");
	let sexIndex=ref(0);
	let sexRange=reactive<object>(
		[
			{
			  "id":1,
			  "name":"男"
			},
			{
			  "id":2,
			  "name":"女"
			},
		]
	);
	let adrRegion=reactive<string[]>(["广东省","广州市","天河区"]);
	let adrValue=ref("广东省/广州市/天河区");
	let showpicker=ref(false);
	let birthdate=ref("");
	let birthValue=ref("");
	let signValue=ref("请输入签名");
	let description=ref("");

	const datetimePickerRef = ref(null);
	const formatter = (type:string, value:string) => {
	  if (type === 'year') {
		return `${value}年`;
	  }
	  if (type === 'month') {
		return `${value}月`;
	  }
	  if (type === 'day') {
		return `${value}日`;
	  }
	  return value;
	};
	
	onLoad(()=>{
		/* let tdate=new Date("1970-01-01");
		console.log("1970-01-01时间戳:",new Date().getTime()-Date.parse("1970/1/1 00:00")); */
	})

	onReady(() => {
	  // 微信小程序需要用此写法
	  datetimePickerRef.value.setFormatter(formatter);
	});
	const avatarChoose=function(){
		uni.$tools.toast("微信环境下，需要去微信开启隐私协议才能调用接口");
		uni.chooseImage({
			count: 1, //限制1张图片
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//sourceType: ['album'], //从相册选择
			success:(res)=>{
				console.log(JSON.stringify(res.tempFilePaths));
			},
			fail:err=>{
				console.log("选择失败",err);
			}
		});
	}
	const showPicker=function(){
		console.log("显示生日");
		showpicker.value=true;
	}
	const bindnickName=function(e:any){
		//console.log("绑定昵称...",e);
		nickName.value=e.detail.value;
	}
	const bindmobile=function(e:any){
		//console.log("绑定手机号码...",e);
		mobile.value=e.detail.value;
	}
	const bindPickerChange=function(e:any){
		//console.log("改变性别...",e);
		sexIndex.value=e.detail.value;
	}
	const bindRegionChange=function(e:any){
		console.log("城市选择...",e);
		console.log("城市选择...",e.detail.value);
		adrRegion[0]=e.detail.value[0];
		adrRegion[1]=e.detail.value[1];
		adrRegion[2]=e.detail.value[2];
		adrValue.value=adrRegion[0]+"/"+adrRegion[1]+"/"+adrRegion[2]
	}
	/*选择日期*/
	const pkclose=function(){
		showpicker.value=false;
	}
	const pkconfirm=function(e:any){
		console.log("生日...",e);
		let cdate=timestampToDate(e.value);
		console.log("转换日期:",cdate);
		birthValue.value=ChineseDate(cdate.split(" ")[0]); //取2023-11-28
		pkclose();
	}
	const binddescription=function(e:any){
		//console.log("签名事件..",e);
		description.value=e.detail.value;
	}
	const saveData=function(){
		if(/\S/.test(nickName.value)===false){
			uni.$tools.toast("请输入昵称");
			return;
		}
		if(/\S/.test(mobile.value)===false){
			uni.$tools.toast("请输入手机号码");
			return;
		}
		if(!uni.$u.test.mobile(mobile.value)){
			uni.$tools.toast("手机号不正确 请检查");
			return;
		}
		if(/\S/.test(adrValue.value)===false){
			uni.$tools.toast("请选择城市");
			return;
		}
		let paraData={
			nickName:nickName.value,
			mobile:mobile.value,
			sex:sexIndex.value,
			city:adrValue.value,
			birth:birthValue.value,
			sign:description.value
		}
		uni.$tools.toast("提交信息:"+JSON.stringify(paraData));
	}
</script>

<style lang='scss' scoped>
	@import "shop_edituserinfo.scss";
</style>